<template>
  <div class="home">
    <h1>行程调查表</h1>
    <Add @add="add" />
    <List :list="list" @remove="remove" />
    <Count :num="num" />
    <!-- 使用 -->
  </div>
</template>

<script>
import Add from "../components/Add.vue";
import List from "../components/List.vue";
import Count from "../components/Count.vue";
//引入
export default {
  data() {
    return {
      list: [],
      //数据放在父组件就可以三个子组件都能使用
    };
  },
  components: {
    Add,
    List,
    Count,
  },
  //注册
  methods: {
    add(val) {
      this.list.push(val);
    },
    //自定义事件传给子组件 接收子组件传来的数据
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除
  },
  computed: {
    num() {
      let res = this.list.filter((i) => i.city == "昌平").length;
      let res1 = this.list.filter((i) => i.city == "海淀").length;
      let res2 = this.list.filter((i) => i.city == "西安").length;
      let res3 = this.list.filter((i) => i.city == "无").length;
      return {
        res: res,
        res1: res1,
        res2,
        res3,
      };
    },
    //用一个计算属性计算四个数量
  },
};
</script>
<style lang="scss">
.home {
  width: 800px;
  margin: 50px auto;
  > h1 {
    text-align: center;
    margin: 30px;
  }
}
</style>
